<template>
  <div>
    <!--顶部导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
      <el-breadcrumb-item>病床利用率查询</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!--表单-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="科别：" prop="division">
        <el-input v-model="ruleForm.division" placeholder="请输入科别名称"></el-input>
      </el-form-item>
      <el-form-item label="医师：" prop="doctorName">
        <el-input v-model="ruleForm.doctorName" placeholder="请输入医师姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-divider content-position="left">查询列表</el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="division" label="科别" align="center" width="100"></el-table-column>
      <el-table-column prop="bedId" label="病床号" align="center" width="80"></el-table-column>
      <el-table-column prop="name" label="病人姓名" width="120" align="center"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="gender" label="病人性别" width="80" align="center"></el-table-column>
      <el-table-column prop="age" label="病人年龄" width="80" align="center"></el-table-column>
      <el-table-column prop="disease" label="病症" width="200" align="center"></el-table-column>
      <el-table-column prop="doctorName" label="主治医师" width="120" align="center"></el-table-column>
      <el-table-column prop="admissionTime" label="入院日期" width="150" align="center"></el-table-column>
      <el-table-column prop="dischargeTime" label="出院日期" width="150" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small"
                     @click="openEditDialog(scope.row)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small"
                     @click="openDeleteConfirm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div style="margin: 10px 0; text-align: right;">
      <el-pagination
          @current-change="changePage"
          layout="total, prev, pager, next"
          :hide-on-single-page="true"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      tableData: [],
      // 分页相关数据
      currentPage: 1,
      pageSize: 0,
      total: 0,
      // 表单
      ruleForm: {
        division: '内科',
        doctorName: '王五',
      },
      // 表单规则
      rules: {
        division: [
          {required: true, message: '请输入科别名称', trigger: 'blur'},
          {min: 2, max: 10, message: '请输入正确的科别', trigger: 'blur'}
        ],
        doctorName: [
          {required: true, message: '请输入医师姓名', trigger: 'blur'},
          {min: 2, max: 10, message: '请输入正确的医师', trigger: 'blur'}
        ]
      },
    };
  },
  methods: {
    // 切换分页
    changePage(page){
      console.log(page);
    },
    // 弹出修改对话框
    openEditDialog(tableItem) {
      alert('即将编辑【' + tableItem.id + " - " + tableItem.name + '】，还没做！');
    },
    // 弹出删除确认框
    openDeleteConfirm(tableItem) {
      alert('即将删除【' + tableItem.id + " - " + tableItem.name + '】，还没做！');
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9980/statist/beds';
          console.log(url);

          let formData = this.qs.stringify(this.ruleForm);
          console.log(formData);

          this.axios.post(url, formData).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000){
              this.tableData = jsonResult.data.list;
              this.currentPage = jsonResult.data.currentPage;
              this.pageSize = jsonResult.data.pageSize;
              this.total = jsonResult.data.total;
            }else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          })
        }else {
          console.log('请求参数格式错误！');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>